<div id="msgContent">
  <d-panel
    *ngFor="let item of msgItems"
    #anotherPanel
    [isCollapsed]="false"
    [hasLeftPadding]="false"
    [showAnimation]="true"
    [style]="'default'"
    (toggle)="readMsg($event, item)"
  >
    <d-panel-header>
      <d-row [dGutter]="[12, 12]">
        <div style="width: 95%">
          <em class="icon icon-select-arrow" [ngClass]="{ open: anotherPanel.isCollapsed }"></em>
          <d-tag [tag]="getReadTag(item)" [labelStyle]="getTagStyle(item)"></d-tag>
          <b> {{ item.title }}</b>
        </div>
        <div>{{ item.createTime | dRelativeTime: limit | async }}</div>
      </d-row>
    </d-panel-header>
    <d-panel-body>{{ item.content }}</d-panel-body>
  </d-panel>
</div>
<d-pagination
  style="padding-top: 18px"
  size=""
  [total]="msgPager.total"
  [(pageSize)]="msgPager.pageSize"
  [(pageIndex)]="msgPager.pageIndex"
  [canViewTotal]="true"
  [canChangePageSize]="true"
  [canJumpPage]="true"
  [maxItems]="5"
  (pageIndexChange)="refreshMessage()"
  (pageSizeChange)="refreshMessage()"
>
</d-pagination>
